<template>
  <div class="payment-result-container">
    <div class="header">
      <span class="title">支付结果</span>
      <div class="more-options">
        <span class="ellipsis">...</span>
      </div>
      <div class="refresh-icon">
        <span class="refresh-symbol"></span>
      </div>
    </div>
    <div class="success-message">

      <span style="align-content: center">购买成功!</span>
    </div>
    <div class="merchant-info">
      <span>{{ merchantName }}</span>
    </div>
    <div class="coupon-code">
      <span>优惠码：{{ couponCode }}</span>
    </div>
    <div class="code-area">
      <div id="qrcode"></div>
      <div id="barcode"></div>
    </div>
    <button class="view-order-button" @click="viewOrder">查看订单</button>
  </div>
</template>

<script>
import QRCode from 'qrcode';
import JSBarcode from 'jsbarcode';

export default {
  data() {
    return {
      merchantName: '鼓楼金记刷肉',
      couponCode: '12323498343',
      qrCodeText: 'https://example.com/order/123', // 二维码内容，可替换为实际订单相关链接等
      barCodeText: '1234567890' // 条形码内容，可替换为实际订单编号等
    };
  },
  mounted() {
    this.generateQRCode();
    this.generateBarcode();
  },
  methods: {
    generateQRCode() {
      new QRCode(document.getElementById('qrcode'), {
        text: this.qrCodeText,
        width: 128,
        height: 128,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    generateBarcode() {
      JSBarcode(document.getElementById('barcode'), this.barCodeText, {
        width: 2,
        height: 100,
        displayValue: true
      });
    },
    viewOrder() {
      console.log('点击查看订单');
      // 此处可添加实际跳转订单页面的逻辑，例如使用 Vue Router 进行跳转
       this.$router.push('/order');
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.payment-result-container {
                      background-color: #f5f5f5;
                      height: 100vh;
                      display: flex;
                      flex-direction: column;
                      padding: 20px;
                    }

.header {
  background-color: #FF5722;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  height: 44px;
}

.back-icon {
          width: 20px;
          height: 20px;
          border: solid white;
          border-width: 0 2px 2px 0;
          transform: rotate(135deg);
          -webkit-transform: rotate(135deg);
          cursor: pointer;
        }

.title {
  font-size: 16px;
}

.more-options,
        .refresh-icon {
                     cursor: pointer;
                   }

.ellipsis {
  font-size: 20px;
}

.refresh-symbol {
             width: 20px;
             height: 20px;
             background-image: url('https://img.icons8.com/ios - filled/20/ffffff/refresh - 2--v1.png');
             background-size: cover;
           }

.success-message {
             display: flex;
             align-items: center;
             margin-bottom: 20px;
           }

.success-message img {
             margin-right: 10px;
           }

.merchant-info {
              text-align: center;
              margin-bottom: 10px;
              font-size: 14px;
            }

.coupon-code {
            text-align: center;
            margin-bottom: 20px;
            font-size: 14px;
          }

.code-area {
          text-align: center;
          margin-bottom: 20px;
        }

.code-area div {
          display: inline-block;
          margin: 0 10px;
        }

.view-order-button {
                  display: block;
                  width: 100%;
                  background-color: #FF5722;
                  color: white;
                  text-align: center;
                  padding: 10px;
                  border: none;
                  border-radius: 5px;
                  cursor: pointer;
                  font-size: 14px;
                }
</style>